<template>
	<view class="container bg-white">
		<block v-if='code==1'>
			<view class="register">忘记密码</view>
			<view class="content">
				<view class="phone">
					<input placeholder-class='plac' type="number" v-model="phone" value="" class="text-13 flex-treble"
						placeholder="请输入手机号码" />
					<view class="img" v-if='phone' @click="clear()">
						<image src="../../static/close2.png"></image>
					</view>

				</view>
				<view class="code" @click="getCode">获取验证码</view>
			</view>
		</block>
		<block v-else-if="code==2">
			<codeVerify @verify='verify' :verifyTip='verifyTip' :phone='phone' :isShow="isShow" @reGet='reGet'>
			</codeVerify>
		</block>
		<block v-else-if="code==3">
			<view class="register">设置登录密码</view>
			<view class="content">
				<view class="phone">
					<input placeholder-class='plac' v-model="pwd" type="password" value="" class="text-13 flex-treble"
						placeholder="请输入密码" />

				</view>
				<view class="next" @click="nextPwd()">下一步</view>
			</view>
		</block>
		<block v-else>
			<view class="register">再次输入密码</view>
			<view class="content">
				<view class="phone">
					<input placeholder-class='plac' v-model="newPwd" type="password" value=""
						class="text-13 flex-treble" placeholder="请输入密码" />

				</view>
				<view class="code" @click="complete()">完成</view>
			</view>
		</block>

	</view>
</template>

<script>
	import codeVerify from '@/components/code-verify.vue'
	export default {
		data() {
			return {
				code: 1,
				pwd: '',
				newPwd: '',
				phone: '',
				pcode: '',
				type: '',
				status: 1,
				timer: null,
				verifyTip: 60,
				isShow: true,
				codes: ''

			}
		},
		components: {
			codeVerify
		},
		onLoad(options) {
			console.log(options)
			if (options.code) {
				this.code = options.code
			}
			if (options.phone) {
				this.phone = options.phone
			}
			if (options.pcode) {
				this.pcode = options.pcode
			}
			if (options.type) {
				this.type = options.type
			} else {
				this.type = 3
			}
		},
		beforeDestroy() {
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
		},
		methods: {
			complete() {

				if (this.pwd && this.newPwd) {
					if (this.pwd != this.newPwd) {
						return this.$util.msg('前后密码不一致')
					} else {
						var CusBase64 = require('@/common/js/base64.js');

						var passWord = CusBase64.CusBASE64.encoder(this.pwd);
						const data = {
							code: this.pcode,
							mobile: this.phone,
							codeType: this.type,
							password: passWord
						}
						let api = ''
						if (this.type == 1) {
							console.log(1111)
							api = 'register'
							uni.getProvider({
								service: 'oauth',
								success: (res) => {
									if (res.provider.indexOf('weixin') > -1) {
										console.log(1111)
										uni.login({
											provider: 'weixin',
											success: (loginRes) => {
												console.log(loginRes)
												if (loginRes.errMsg == "login:ok") {
													data['openid'] = loginRes.authResult.openid;
													data['unionid'] = loginRes.authResult.unionid
													this.$post(this.$api[api], data).then(res => {
														const [err, rs] = res
														if (rs) {
															uni.setStorage({
																key: 'openid',
																data: loginRes.authResult.openid,
															})
															console.log(data)
															console.log(rs.data)
															console.log(rs.data.id)
															uni.setStorage({
																key: 'userId',
																data: rs
																	.data
																	.id
															})
															this.$util.msg(rs.message)
															setTimeout(() => {
																uni.switchTab({
																	url: '/pages/home/home'
																})
																	
														}, 1500)
														}
													})

												}
											},
											fail(e) {
												console.log(e)
											}
										})

									}
								}
							})
						} else {
							console.log(2222)
							api = 'resetPassword'

							this.$post(this.$api[api], data).then(res => {
								const [err, rs] = res
								if (res) {
									this.$util.msg(rs.message)
									setTimeout(() => {
										uni.redirectTo({
											url: '/pages/login/login'
										})
									}, 1500)
								}
							})
						}


					}

				} else {
					return this.$util.msg('请确认密码')
				}
			},
			send() {

				this.code = 2
			},
			setPwd(index) {
				this.code = index
			},
			nextPwd() {
				if (this.pwd) {
					this.code = 4
				} else {
					this.$util.msg('密码不能为空')
				}

			},
			clear(e) {
				this.phone = ''
				console.log(e)

			},
			async getCode() {
				if (this.phone) {
					const data = {
						mobile: this.phone,
						codeType: 2
					}
					const [err, rs] = await this.$post(this.$api.sendCode, data)
					if (rs) {
						this.$util.msg(rs.message)
						this.code = 2
						this.timedown(this.verifyTip)
					}


				} else {
					this.$util.msg('请输入手机号')
				}
			},
			timedown(num) {
				console.log(num)
				let that = this;
				if (num == 0) {
					that.isShow = false;
					return clearTimeout();
				} else {
					that.isShow = true;
					this.timer = setTimeout(function() {
						that.verifyTip = num - 1
						that.timedown(num - 1);
					}, 1000);
				}
			},
			reGet() {
				this.verifyTip = 60
				this.getCode()

			},
			async verify(data) {
				data['codeType'] = 3
				const [err, rs] = await this.$post(this.$api.verifyCode, data)
				console.log(rs)
				if (rs) {
					this.code = 3
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.container {
		width: 100vw;
		height: 100%;

		box-sizing: border-box;

		.register {
			padding-top: 97rpx;
			font-size: 54rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #181818;
			padding-left: 67rpx;
		}
	}

	.content {
		padding-left: 63rpx;
		padding-right: 66rpx;
		margin-top: 123rpx;
	}

	.phone {
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid #ED7200;
		display: flex;
		justify-content: space-between;
		position: relative;

		.img {
			position: absolute;
			width: 64rpx;
			height: 64rpx;
			right: 0;
			text-align: center;
			line-height: 64rpx;
			z-index: 99;

		}

		image {
			width: 40rpx;
			height: 40rpx;
		}

		input {
			font-weight: bold;
			color: #181818;
			background: transparent;
			font-size: 34rpx;
		}


	}

	.plac {
		font-weight: normal;
		color: #D9D9D9;
	}

	.code {
		margin-top: 118rpx;
		height: 94rpx;
		background: #ED7200;
		border-radius: 45rpx;
		text-align: center;
		line-height: 94rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		opacity: 0.5;
	}

	.next {
		margin-top: 118rpx;
		height: 94rpx;
		background: #ED7200;
		border-radius: 45rpx;
		text-align: center;
		line-height: 94rpx;
		color: #FFFFFF;
		font-size: 32rpx;

	}
</style>
